<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial - scale=1.0">
    <title>用户注册</title>
    <style>


        form {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 20px;
            border: 1px solid #ccc;
        }

        label {
            font-weight: bold;
        }

        input {
            align-items: center;
            padding: 5px;
        }
     </style>
</head>

<body>
    <h2 align="center">项目实战</h2>
    <h3>用户注册</h3>
    <form>
        <label for="email">ID（请使用Email注册）</label>
        <input  type="email" id="email" name="email" required><br> 
        <label for="password">密码</label>
        <input   type="password" id="password" name="password" required><br>

        <label for="birthdate">出生日期</label>
        <input type="date" id="birthdate" name="birthdate" required><br>

        <label for="nationality">国籍</label>
        <select id="nationality" name="nationality">
            <option value="">请选择</option>
            <!-- 可在此添加更多国籍选项，如<option value="China">中国</option> -->
        </select><br>

        <label for="avatar">个性头像</label>
        <input type="file" id="avatar" name="avatar"><br>

        <div id="secret - question - section">
            <label for="secret - question">保密问题</label>
            <input type="text" id="secret - question" name="secret - question">
            <label for="answer">答案</label>
            <input type="text" id="answer" name="answer">
            <button type="button" onclick="removeSecretQuestion(this)">删除</button>
        </div>
        <button type="button" onclick="addSecretQuestion()">+ 保密问题</button><br>

        <input type="submit" value="提交信息">
    </form>

    <script>
        function addSecretQuestion() {
            const section = document.createElement('div');
            section.innerHTML = `
                <label for="secret - question - ${Date.now()}">保密问题</label>
                <input type="text" id="secret - question - ${Date.now()}" name="secret - question">
                <label for="answer - ${Date.now()}">答案</label>
                <input type="text" id="answer - ${Date.now()}" name="answer">
                <button type="button" onclick="removeSecretQuestion(this)">删除</button>
            `;
            document.getElementById('secret - question - section').appendChild(section);
        }

        function removeSecretQuestion(button) {
            button.parentNode.remove();
        }
    </script>
</body>

</html>